<template>
  <!--手动创建签表-->
  <div class="content-box">
    <heading grade="1">赛事签表</heading>
    <el-form v-bind="getFormProps()">
      <el-radio-group v-model="currentTab" class="checker-tab" @change="handleStatusChange">
        <el-radio v-for="(item, index) in tabList" :key="index" :label="item.value" v-if="total > 16">{{item.name}}</el-radio>
      </el-radio-group>
    </el-form>
    <transition v-loading="!total">
      <!--四位签表-->
      <create-four-semifinal-table v-if="total <= 4 && total > 0" :currentTab="currentTab" :key="total" :isedit="isedit"></create-four-semifinal-table>
      <!--八位签表-->
      <current-semifinal-table v-if="total <= 8 && total > 4" :currentTab="currentTab" :total="8" :key="total" :isedit="isedit"></current-semifinal-table>
      <!--16签表-->
      <current-semifinal-table v-if="total > 8 && total <= 16" :currentTab="currentTab" :total="16" :key="total" :isedit="isedit"></current-semifinal-table>
      <!--32位签表-->
      <current-semifinal-table v-if="total <= 32 && total > 16" :currentTab="currentTab" :total="32" :key="total" :isedit="isedit"></current-semifinal-table>
      <!--64签表-->
      <current-semifinal-table v-if="total > 32 && total <= 64" :currentTab="currentTab" :total="64" :key="total" :isedit="isedit"></current-semifinal-table>
      <!--128签表-->
      <current-semifinal-table v-if="total > 64 && total <= 128" :currentTab="currentTab" :total="128" :key="total" :isedit="isedit"></current-semifinal-table>
      <!--无数据提示-->
      <placeholder text="暂无参赛人员" src="/static/images/match/nomatch.png" v-else-if="total == 0"></placeholder>
    </transition>
    <!--操作按钮-->
    <div class="button-box" v-if="total > 0">
      <el-button type="primary" @click="handlerSemifinaTable('draft')">保存草稿</el-button>
      <el-button @click="handlerSemifinaTable('save')" :disabled="isSave">完成签表</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { form } from 'utils/mixins'
import raceApi from 'api/race'
import CreateFourSemifinalTable from './components/CreateFourSemifinalTable'
import CurrentSemifinalTable from './components/CurrentSemifinalTable'
export default {
  mixins: [form],
  components: {
    CreateFourSemifinalTable,
    CurrentSemifinalTable
  },
  computed: {
    ...mapGetters({
      race_weedour_teamlist: 'race_weedour_teamlist',
      race_weedout_vslist: 'race_weedout_vslist'
    }),
    total: function () {
      return this.race_weedour_teamlist.length // 参赛球队&&决定签位
    }
  },
  beforeCreate () {
    this.$store.dispatch('race_weedour_teamlist', {matchId: this.$route.query.id})
  },
  mounted () {
    raceApi.getDrawData({
      matchId: this.$route.query.id
    }).then((res) => {
      if (res.data && res.data.length > 0) {
        this.setSemifinaTableValue(res.data)
      } else {
        this.isedit = 'no'
      }
    }).catch((ERR) => {
      return false
    })
  },
  destroyed () {
    this.$store.commit('RACE_WEEDOUT_VSLIST', [])
  },
  data () {
    return {
      isSave: true,
      currentTab: 1,
      isedit: 'yes',
      tabList: [
        {
          name: '1/4区',
          value: 1
        },
        {
          name: '2/4区',
          value: 2
        },
        {
          name: '3/4区',
          value: 3
        },
        {
          name: '4/4区',
          value: 4
        }
      ],
      teamvsValue: []
    }
  },
  methods: {
    // tab切换
    handleStatusChange () {
      console.log('赛区：-> ' + this.currentTab)
    },
    // 修改签表时设置默认对阵数据
    setSemifinaTableValue (data) {
      let valueData = []
      let nullLength = 0
      if (this.total <= 16) { // 无分区签表
        valueData = data[0].grades[0].matchScheduleResp
        let i = 0
        for (let item of valueData) {
          this.teamvsValue.push({
            host: {
              value: item.hostUserId,
              name: item.hostUserName
            },
            guest: {
              value: item.bye === true ? 'null' + i : item.guestUserId,
              name: item.bye === true ? '轮空' : item.guestUserName
            }
          })
          if (item.bye === true) {
            i++
          }
        }
      } else {
        for (let i = 0; i < 4; i++) {
          for (let a = 0; a < data[i].grades[0].matchScheduleResp.length; a++) {
            this.teamvsValue.push({
              host: {
                value: data[i].grades[0].matchScheduleResp[a].hostUserId,
                name: data[i].grades[0].matchScheduleResp[a].hostUserName
              },
              guest: {
                value: data[i].grades[0].matchScheduleResp[a].bye === true ? 'null' + nullLength : data[i].grades[0].matchScheduleResp[a].guestUserId,
                name: data[i].grades[0].matchScheduleResp[a].bye === true ? '轮空' : data[i].grades[0].matchScheduleResp[a].guestUserName
              }
            })
            if (!data[i].grades[0].matchScheduleResp[a].guestUserId) {
              nullLength++
            }
          }
        }
      }
      this.isedit = 'yes'
      this.$store.commit('RACE_WEEDOUT_VSLIST', this.teamvsValue)
    },
    // 提交签表数据
    getSemifinaTable () {
      let matchCreateDrawReq = {
        matchId: this.$route.query.id,
        zone: []
      }
      if (this.total <= 16) { // 四位签表
        let userList = []
        for (let item of this.race_weedout_vslist) {
          let guestUser = ''
          if (item && item.guest && item.guest.value) {
            guestUser = item.guest.value.includes('null') ? null : item.guest.value
          } else {
            guestUser = ''
          }
          userList.push({
            hostUserId: item && item.host && item.host.value ? item.host.value : '',
            guestUserId: guestUser
          })
        }
        matchCreateDrawReq.zone.push({
          zoneNumber: 1,
          users: userList
        })
      } else {
        let setpLength = 0 // 分赛区场次
        if (this.total <= 32 && this.total > 16) {
          setpLength = 4
        } else if (this.total <= 64 && this.total > 32) {
          setpLength = 8
        } else if (this.total <= 128 && this.total > 64) {
          setpLength = 16
        }
        for (let i = 0; i < 4; i++) {
          let userList = []
          for (let val = i * setpLength; val < (i + 1) * setpLength; val++) {
            let guestUser = ''
            if (this.race_weedout_vslist[val] && this.race_weedout_vslist[val].guest && this.race_weedout_vslist[val].guest.value) {
              guestUser = this.race_weedout_vslist[val].guest.value.includes('null') ? null : this.race_weedout_vslist[val].guest.value
            } else {
              guestUser = ''
            }
            userList.push({
              hostUserId: this.race_weedout_vslist[val] && this.race_weedout_vslist[val].host && this.race_weedout_vslist[val].host.value ? this.race_weedout_vslist[val].host.value : '',
              guestUserId: guestUser
            })
          }
          matchCreateDrawReq.zone.push({
            zoneNumber: i + 1,
            users: userList
          })
        }
      }
      return matchCreateDrawReq
    },
    // 生成签表按钮
    handlerSemifinaTable (type) {
      let teamType = this.$route.query.tasktype
      let msg = ''
      let isSend = []
      if (type === 'draft') { // 保存草稿
        if (this.race_weedout_vslist.length > 0) {
          for (let item of this.race_weedout_vslist) {
            if (item && (item.host.value || item.guest.value)) {
              // console.log(item.host.value + ' : ' + item.guest.value)
              item.host.value && item.guest.value ? isSend.push(true) : isSend.push(false)
            }
          }
        } else {
          isSend.push(false)
        }
        if (isSend.includes(false) || isSend.length === 0) { // 签表双方不能有只选一方
          msg = teamType === 'single' ? '没有参赛选手或者参赛双方不能只选一方哦' : '没有参赛球队或者参赛双方不能只选一方哦'
          this.$message({
            message: msg,
            type: 'info'
          })
        } else {
          raceApi.handWorkCreateDrawdDraft(
            JSON.stringify(this.getSemifinaTable()),
            {context: this, successMsg: '保存草稿成功', errorMsg: '保存草稿失败'}
          ).then((res) => {
            this.isSave = false
          }).catch((ERR) => {
            return false
          })
        }
      } else { // 生成签表对阵双方不能有空值
        if (this.race_weedout_vslist.length > 0) {
          for (let item of this.race_weedout_vslist) {
            item && (item === '' || item.guest === '' || item.host === '' || item.guest.value === '' || item.host.value === '') ? isSend.push(false) : isSend.push(true)
          }
        } else {
          isSend.push(false)
        }
        if (isSend.includes(false)) { // 签表列表不能有空值
          msg = teamType === 'single' ? '还有参赛选手没有完成录入哦！' : '还有参赛球队没有完成录入哦！'
          this.$message({
            message: msg,
            type: 'info'
          })
        } else { // 数据校验通过生成签表
          raceApi.handWorkCreateDraw(
            JSON.stringify(this.getSemifinaTable()),
            {context: this, successMsg: '生成签表成功', errorMsg: '生成签表失败'}
          ).then((res) => {
            this.$router.push({path: '/race/detail/manage/checktable', query: this.$route.query})
          }).catch((ERR) => {
            return false
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.no_matchlist{
  text-align: center;
  color:#999;
}
</style>
